<template>
  <body>
    <div id="news">
      <div class="content">
        <div class="menuTitle">
          <!-- 面包屑 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>高考资讯</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="newCon">
          <div class="news">
            <div class="newsNav">
              <span
                :class="active == 0 ? 'activeClass' : ''"
                @click="newsNavClick(0)"
                >高考推荐</span
              >
              <span
                :class="active == 1 ? 'activeClass' : ''"
                @click="newsNavClick(1)"
                >高考信息</span
              >
              <span
                :class="active == 2 ? 'activeClass' : ''"
                @click="newsNavClick(2)"
                >专业解读</span
              >
              <span
                :class="active == 3 ? 'activeClass' : ''"
                @click="newsNavClick(3)"
                >志愿填报</span
              >
            </div>
            <div class="newsContent">
              <ul>
                <li v-for="item in newsList">
                  <a :href="item.link" target="_blank">{{ item.title }}</a>
                  <p>{{ item.source }}</p>
                  <p style="padding-bottom: 10px">{{ item.date }}</p>
                  <div
                    style="width: 700px; height: 1px; background-color: #cac6c6"
                  ></div>
                </li>
              </ul>
            </div>
            <div class="pagination">
              <el-pagination
                class="pagination"
                @current-change="handleCurrentChange"
                :current-page="pagination.page"
                :page-size="pagination.size"
                layout="total, prev, pager, next"
                :total="pagination.count"
                background
              >
              </el-pagination>
            </div>
          </div>
          <div
            style="float: right; width: 300px; margin-right: 30px"
            class="rank"
          >
            <h2>校友会排名</h2>
            <el-card
              style="margin-top: 10px; margin-left: 10px; margin-bottom: 20px"
            >
              <div
                class="right_item"
                v-for="(item, index) in recomCollegeList"
                :key="index"
                @mouseover="changeBig(index)"
              >
                <div
                  class="image"
                  :style="{ width: change !== index ? '20px' : '50px' }"
                >
                  <img :src="item.logo" alt="" />
                </div>
                <div class="info">
                  <div
                    class="infoName"
                    @click="replace(item.unvId)"
                    :style="{ fontSize: change !== index ? '14px' : '16px' }"
                  >
                    {{ item.name }}
                  </div>
                  <span
                    :style="{ display: change !== index ? 'none' : 'block' }"
                    class="infoBottom"
                  >
                    <span>{{ item.category }}</span>
                    <span>{{ item.type }} </span>
                  </span>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </body>
</template>

<script>
import qs from "qs";
import { ThemeRiverChart } from "echarts/charts";
import throttling from "@/public/throttling.js";
export default {
  name: "News",
  data() {
    return {
      // 是否放大或缩小
      change: 0,
      // 校友会排名
      recomCollegeList: [],
      //初始分页条件
      pagination: {
        page: 1,
        count: 4,
        size: 9,
      },
      showname: true,
      img: require("@/assets/二维码.png"),
      active: 0,
      newsList: [],
      newsLists: [],
    };
  },
  methods: {
    // 手风琴效果
    changeBig(index) {
      this.change = index;
      console.log(this.change);
    },
    replace(unvId) {
      console.log(unvId);
      this.$router.replace({
        name: "college",
        params: { id: unvId },
      });
    },
    color(i) {
      if (i === 0 || i === 1 || i === 2) {
        return "white";
      }
    },
    // 切换新闻
    newsNavClick: throttling(function (i) {
      this.active = i;
      this.$axios
        .post(
          "/getAllNews",
          qs.stringify({
            type: this.active + 1,
            page: this.pagination.page,
            size: this.pagination.size,
          })
        )
        .then((res) => {
          console.log(res);
          this.newsList = res.data.list;
          this.pagination.count = res.data.total;
        });
    }, 200),
    handleCurrentChange(page) {
      this.pagination.page = page;
      this.$axios
        .post(
          "/getAllNews",
          qs.stringify({
            type: this.active + 1,
            page: this.pagination.page,
            size: this.pagination.size,
          })
        )
        .then((res) => {
          console.log(res);
          this.newsList = res.data.list;
          this.pagination.count = res.data.total;
        });
      console.log("跳转了");
    },
  },
  created() {
    this.$axios
      .post(
        "/getAllNews",
        qs.stringify({
          type: this.active + 1,
          page: this.pagination.page,
          size: this.pagination.size,
        })
      )
      .then((res) => {
        console.log(res);
        this.newsList = res.data.list;
        this.pagination.count = res.data.total;
      });
    this.$axios.get("/xyhRank").then((res) => {
      console.log(res);
      this.recomCollegeList = res.data;
    });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  width: 100%;
}

h2 {
  font-size: 20px;
  font-weight: bold;
}

#news {
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
  color: #333;
}

li {
  list-style: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 195.1vh;
  background-color: #fff;
  margin: 1.6vh auto;
}

.menuTitle {
  height: 4.9vh;
  line-height: 4.9vh;
  text-align: left;
  margin-left: 2.2vw;
}

.el-breadcrumb {
  height: 2.9vh;
  line-height: 2.9vh;
}

.menuTitle .el-breadcrumb__item {
  font-size: 14px;
}

.newCon {
  display: flex;
}
.right_item {
  width: 20.8vw;
  display: flex;
  margin-bottom: 3.3vh;
}

.image {
  width: 3.7vw;
}
.image img {
  width: 100%;
}

.info {
  margin-left: 0.7vw;
}

.info {
  margin-bottom: 0.4vw;
}

.infoName:hover {
  color: rgba(255, 101, 0);
  cursor: pointer;
}

.infoBottom {
  margin-top: 1.3vh;
  font-size: 14px;
  color: rgba(255, 101, 0);
}

.news {
  display: flex;
  flex-direction: column;
  margin-left: 2.2vw;
  width: 59.3vw;
  height: 141.5vh;
}

.activeClass {
  color: rgba(255, 101, 0);
  border-top: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;
  border-left: 1px solid #eeeeee;
}

.newsNav span {
  width: 9vw;
  text-align: center;
  height: 6.7vh;
  line-height: 6.7vh;
  float: left;
  font-size: 20px;
}

.newsNav span:hover {
  cursor: pointer;
}

.newsContent {
  width: 55.6vw;
  top: 6.8vh;
  border: 1px solid #eeeeee;
}

.newsContent li {
  padding: 1.6vh 1.5vw;
  width: 100%;
}

.newsContent a {
  font-size: 18px;
}

.newsContent a:hover {
  color: rgba(255, 101, 0);
}

.newsContent p {
  font-size: 14px;
  padding-top: 1.6vh;
  color: #666;
}

.pagination {
  width: 2vw;
  height: 6.5vh;
  line-height: 6.5vh;
  margin-top: 5px;
  margin-left: 100px;
}
</style>
